<template>
  <div class="page-edit">
    <header>
      <i style="font-size: 18px; cursor: pointer; margin-right: 8px" class="el-icon-arrow-left" @click="goBack"></i>
      <span>{{ title }}</span>
    </header>
    <section class="edit-body">
      <div class="form-page">
        <p class="title-level2">基本信息</p>
        <el-form ref="form" :model="form" :rules="rules" label-width="140px">
          <el-col :span="8">
            <el-form-item label="考核任务" prop="examineTask">
              <el-input v-model="form.examineTask" placeholder="请输入考核任务" :readonly="!isEdit" :disabled="!isEdit" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考核部门" prop="examineDepartment">
              <treeselect
                  v-model="form.examineDepartment"
                  :options="deptOptions"
                  :disabled="!isEdit"
                  noResultsText="暂无数据"
                  :normalizer="normalizer"
                  placeholder="选择所属部门"
                  class="treeselect-main"
                  style="width: 100%; height: 32px"
                  @select="selectNode"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="被考核人" prop="assesseeList">
                <el-select v-model="form.assesseeList" placeholder="请选择被考核人" :readonly="!isEdit" :disabled="!isEdit" multiple>
                  <el-option v-for="dict in listUserOptions" :key="dict.userId" :label="dict.nickName"
                    :value="dict.userId" @change="() => $forceUpdate()"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考核负责人" prop="personResponsible">
              <el-select v-model="form.personResponsible" placeholder="请选择考核负责人" :readonly="!isEdit" :disabled="!isEdit">
                <el-option v-for="dict in listUserOptions" :key="dict.userId" :label="dict.nickName"
                  :value="dict.userId"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考核类别" prop="examineCategory">
              <el-radio-group v-model="form.examineCategory" @change="handleRadioChange">
                <el-radio :label="'1'">年度</el-radio>
                <el-radio :label="'2'">季度</el-radio>
                <el-radio :label="'3'">月度</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考核时间" prop="examineTime">
              <el-select v-model="form.examineTime" placeholder="请选择考核时间" :readonly="!isEdit" :disabled="!isEdit">
                <el-option v-for="dict in listTimeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue" @change="() => this.$forceUpdate()"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="截至填报时间" prop="expirationTime">
              <el-date-picker clearable :readonly="!isEdit" :disabled="!isEdit" v-model="form.expirationTime" type="date"
                value-format="yyyy-MM-dd" placeholder="选择截至填报时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考核分类" prop="expirationTime">
              <el-select v-model="form.examineType" placeholder="请选择考核分类" :readonly="!isEdit" :disabled="!isEdit">
                <el-option v-for="dict in examineTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考核表名称" prop="examinationTableId">
              <el-select v-model="form.examinationTableId" placeholder="请选择考核表名称" @change="handleTableListsChange"  :readonly="!isEdit" :disabled="!isEdit">
                <el-option v-for="dict in examineLists" :key="dict.id" :label="dict.examinationTableName"
                  :value="dict.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="说明" prop="illustrate">
              <el-input v-model="form.illustrate" type="textarea" placeholder="请输入内容" :readonly="!isEdit"
                :disabled="!isEdit" />
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div class="form-page">
        <p class="title-level2">考核表详情</p>
        <DropTable :info="tableInfo" ref="dropTable" :type="type"/>
      </div>
    </section>
    <footer>
      <el-button @click="goBack">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </footer>
  </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listTable } from "@/api/examine/table";
import { listUser } from "@/api/system/user.js";
import { addTask, updateTask,associationTask } from "@/api/examine/task";
import DropTable from './table.vue'
import { listDept } from "@/api/system/dept";

export default {
  components: { Treeselect,DropTable },
  props:['title','info','isEdit','type'],
  data() {
    return {
      form: {},
      rules: {
        examineTask:[{required:true,message:'请输入考核任务',trigger:'blur'}],
        personResponsible:[{required:true,message:'请选择考核负责人',trigger:'change'}],
        examineCategory:[{required:true,message:'请选择考核类别',trigger:'change'}],
        examineDepartment:[{required:true,message:'请选择考核部门',trigger:'change'}],
        assesseeList:[{required:true,message:'请选择被考核人',trigger:'change'}],
        examineTime:[{required:true,message:'请选择考核时间',trigger:'change'}],
        expirationTime:[{required:true,message:'请选择截至填报时间',trigger:'change'}],
        examinationTableId:[{required:true,message:'请选择考核表名称',trigger:'change'}],
      },
      examineTypeOptions: [],
      examineLists: [],
      listUserOptions:[],
      listTime:[
        {dictLabel:'2024年',dictValue:'2024年',type:1},
        {dictLabel:'2023年',dictValue:'2023年',type:1},
        {dictLabel:'2022年',dictValue:'2022年',type:1},
        {dictLabel:'2021年',dictValue:'2021年',type:1},
        {dictLabel:'第一季度',dictValue:'第一季度',type:2},
        {dictLabel:'第二季度',dictValue:'第二季度',type:2},
        {dictLabel:'第三季度',dictValue:'第三季度',type:2},
        {dictLabel:'第四季度',dictValue:'第四季度',type:2},
        {dictLabel:'1月',dictValue:'1月',type:3},
        {dictLabel:'2月',dictValue:'2月',type:3},
        {dictLabel:'3月',dictValue:'3月',type:3},
        {dictLabel:'4月',dictValue:'4月',type:3},
        {dictLabel:'5月',dictValue:'5月',type:3},
        {dictLabel:'6月',dictValue:'6月',type:3},
        {dictLabel:'7月',dictValue:'7月',type:3},
        {dictLabel:'8月',dictValue:'8月',type:3},
        {dictLabel:'9月',dictValue:'9月',type:3},
        {dictLabel:'10月',dictValue:'10月',type:3},
        {dictLabel:'11月',dictValue:'11月',type:3},
        {dictLabel:'12月',dictValue:'12月',type:3},
      ],
      listTimeOptions:[],
      allListUsersOptions:[],          
      tableInfo:{},
      deptOptions:[],
    }
  },
  watch:{
    info(newVal,oldVal){
      console.log('newVal',newVal);
      if(newVal!=oldVal){
        this.form={
          ...newVal,
          assesseeList:[newVal.assessee]
        };
      }
    },
  },
  mounted() {
    this.getDicts("examine_type").then(response => {
      this.examineTypeOptions = response.data;
    });
    this.getPage();
    this.getlistUser();
    this.getListDept();
  },
  methods: {
    goBack() {
      this.$emit('close')
    },
    // 组件传回的部门id
    deptChange(val) {
      this.form.examineDepartment = val
      console.log('tdept',val,this.form.examineDepartment);   
    },
    // 组件传回的人员id
    dutyChange(val) {
      this.form.assesseeList = val;
      console.log('dutyChange',val,this.form.assesseeList);
    },
    handleSelChange(value, item) {
      this.$forceUpdate();
      this.form[item] = value;
    },
    /** 查询绩效考核列表 */
    getPage() {
      listTable().then(response => {
        console.log('reso',response,this.form)
        this.examineLists=response.data;
        this.tableInfo = this.examineLists.find(_ => this.form.examinationTableId==_.id);
      });
    },
    getListDept(){
      listDept().then((response) => {
        this.deptOptions = this.handleTree(response.data, "deptId")
      })
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
          delete node.children
      }
      return {
          id: node.deptId,
          label: node.deptName,
          children: node.children,
      }
    },
    selectNode(val){
      console.log('val selectNode',val);
      delete this.form.assesseeList;
      this.getlistUser(val.deptId);
    },
    /** 查询所有用户 */
    getlistUser(deptId){
      const params = {deptId:deptId}
      listUser(params).then(res=>{
        this.listUserOptions = res.rows;
        console.log('listUser',this.listUser)
      })
    },
    handleRadioChange(val){
      delete this.form.examineTime;
      this.listTimeOptions=this.listTime.filter(_ => _.type==val);
    },
    /** 提交按钮 */
    submitForm() {
      console.log('this.$refs',this.$refs.dropTable)
      console.log('this.info',this.info);
      if(this.type=='fill'){
        let params=this.$refs.dropTable.tableData.map(_ => {
          return {
            examineTaskId:this.info.id,
            examinationTableId:_.examinationTableId,
            examineDropId:_.id,
            deductPoints:_.deductPoints,
            score:_.score,
            factoryId:this.$store.getters.factoryId,
          }
        })
        console.log('params',params);
        associationTask(params).then(res => {
          console.log('res',res);
        })
      }else{
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateTask(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.$emit('close')
              });
            } else {
              addTask(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.$emit('close')
              });
            }
          }
        });
      }

    },
    handleTableListsChange(val){
      console.log('tableId',val,this.examineLists);
      this.tableInfo = this.examineLists.find(_ => _.id==val);
      console.log('this.tableInfo',this.tableInfo);
    }
  }
}
</script>
<style scoped></style>

